<script lang="ts" setup>
import { getTyphoonList, getTyphoonInfo } from '@/service'
import { useTyphoonStore } from '@/store'
import Typhoon from '@/utils/typhoon'

const typhoonStore = useTyphoonStore()
const typhoonList = ref<TyphoonYearInfo[]>([])
const typhoonMap: Map<string, Typhoon> = new Map()

async function selectChange(selectedRows: TyphoonYearInfo[], selectedRow: TyphoonYearInfo) {
  if (selectedRows.length > 0 && !typhoonMap.has(`${selectedRow.ename}-${selectedRow.tfbh}`)) {
    const { typhoon } = await addTyphoon(selectedRow.tfbh)
    typhoonMap.set(`${selectedRow.ename}-${selectedRow.tfbh}`, typhoon)
  } else if (selectedRows.length === 0 || typhoonMap.has(`${selectedRow.ename}-${selectedRow.tfbh}`)) {
    typhoonMap.get(`${selectedRow.ename}-${selectedRow.tfbh}`)?.destroy()
    typhoonMap.delete(`${selectedRow.ename}-${selectedRow.tfbh}`)
  }
}

function handleSelectAll(selectedRows: TyphoonYearInfo[]) {
  if (selectedRows.length === 0) {
    typhoonMap.forEach((typhoonVal) => typhoonVal.destroy())
    typhoonMap.clear()
  } else {
    selectedRows.forEach(async (selectedRow: TyphoonYearInfo) => {
      if (!typhoonMap.has(`${selectedRow.ename}-${selectedRow.tfbh}`)) {
        const { typhoon } = await addTyphoon(selectedRow.tfbh, false)
        typhoonMap.set(`${selectedRow.ename}-${selectedRow.tfbh}`, typhoon)
      }
    })
  }
}

function rowDoubleClick(selectedRow: TyphoonYearInfo) {
  if (typhoonMap.has(`${selectedRow.ename}-${selectedRow.tfbh}`)) {
    const typhoon = typhoonMap.get(`${selectedRow.ename}-${selectedRow.tfbh}`) as Typhoon
    window.viewer.flyTo(typhoon.typhoonTrack!.typhoonLineEntity, { duration: 1 })
  }
}

async function addTyphoon(typhoonID: string, flytoTyphoon: boolean = true) {
  const data = await getTyphoonInfo(typhoonID)
  const typhoon = new Typhoon(data[0])
  typhoon.moveTyphoonPolygon()
  if (flytoTyphoon) window.viewer.flyTo(typhoon.typhoonTrack!.typhoonLineEntity, { duration: 1 })
  return { name: typhoon.name, typhoon }
}

onMounted(async () => (typhoonList.value = await getTyphoonList('2024')))

watch(
  () => typhoonStore.year,
  async () => (typhoonList.value = await getTyphoonList(typhoonStore.year))
)
</script>

<template>
  <div class="list-panel">
    <el-table stripe class="list" :data="typhoonList" height="54vh" style="width: 100%" @select="selectChange" @row-dblclick="rowDoubleClick" @select-all="handleSelectAll">
      <el-table-column type="selection" width="30" />
      <el-table-column prop="tfbh" label="台风编号" />
      <el-table-column prop="name" label="中文名称" />
      <el-table-column prop="ename" label="英文名称" />
    </el-table>
  </div>
</template>

<style lang="scss" scoped>
.list-panel {
  .el-table {
    border-radius: 6px;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
  }
  // 表格部分样式
  // 最外层透明
  :deep(.el-table),
  :deep(.el-table__expanded-cell) {
    background-color: transparent;
    color: #93dcfe;
  }

  :deep(.el-table th) {
    background-color: #0a1831;
    user-select: none;
  }

  // 表格内背景颜色
  :deep(.el-table tr),
  :deep(.el-table td) {
    background-color: transparent;
    border: 0px;
    color: #ffffffaf;
    height: 5px;
    font-family:
      Source Han Sans CN Normal,
      Source Han Sans CN Normal-Normal;
    font-weight: Normal;
  }

  // 修改高亮当前行颜色
  :deep(.el-table tbody tr:hover) > td {
    background: #0f4d99 !important;
  }

  // 表格斑马自定义颜色
  :deep(.el-table--striped .el-table__body tr.el-table__row--striped td) {
    background: #1f4b5c8e;
  }
}
</style>
